<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
        1、响应式原理不一样
        
            Vue2的响应式系统基于object.defineProperty()实现，通过劫持对象属性的getter/setter来追踪依赖并触发更新。
            Vue2无法检测对象属性的动态添加或删除，因为object.defineProperty()必须在对象属性存在时才能劫持

            vue3的响应式系统基于ES6 Proxy实现，相比于vue2的object.defineProperty()有了根本性的改进。它解决了vue2中存在的诸多限制，比如Vue3无需特殊API,直接添加属性即可触发响应式更新(user.age = 30)、可以直接检测length的变化（item.length = 0），可以检测对象原型的修改等。
            vue3使用proxy对象拦截对象的所有操作（读取、设置、删除等），从而实现对数据的全面监控。与vue2的defineProperty()相比，Proxy的优势在于：
            拦截范围更广：可以拦截对象属性的添加、删除、枚举、函数调用等操作；
            无需递归遍历：可以直接监听整个对象，而不需要递归处理所有嵌套属性，只有在访问嵌套对象时才会创建 Proxy；
            按需响应式：只有访问到的嵌套对象才会被转换为响应

            特性	                Vue2	                                Vue3
            实现原理	    基于 Object.defineProperty ()	             基于 ES6 Proxy
            深层响应式	    需要递归遍历所有嵌套对象	                   原生支持深层响应式，无需特殊处理
            动态属性添加	需使用 Vue.set () 或 this.$set ()	          直接添加属性即可触发响应式更新
            数组变异方法	需使用特定变异方法（如 push/pop）	            无限制，Proxy 可拦截所有操作
            局限性	        无法检测对象属性的删除、新增，数组长度变化	    无上述限制，提供更一致的响应式行为

        2、组合式API vs Options(选项式Api)



        3、生命周期不一样
        Vue2 钩子	                Vue3 等效钩子	说明
        beforeCreate () { }	    setup()	组件初始化前执行
        created () { }	        setup()	组件实例创建后执行
        beforeMount () { }	    onBeforeMount (()=>{})	DOM 挂载前执行
        mounted () { }	        onMounted (()=>{})	DOM 挂载后执行
        beforeUpdate () { }	    onBeforeUpdate (()=>{})	数据更新前执行
        updated () { }	        onUpdated (()=>{})	数据更新后执行
        beforeDestroy () { }	onBeforeUnmount (()=>{})	组件销毁前执行
        destroyed () { }	    onUnmounted (()=>{})	组件销毁后执行
        activated () { }	    onActivated (()=>{})	缓存组件激活时执行
        deactivated () { }	    onDeactivated (()=>{})	缓存组件停用时执行
        errorCaptured () { }	onErrorCaptured (()=>{})	捕获子组件错误
        */ 

        // 四.组件与模版

        // 五.性能优化
        // 特性	Vue2	                                    Vue3
        // 编译优化	全量更新，虚拟 DOM 比对开销大	    基于动态标记（PatchFlag）的靶向更新，仅更新变化部分
        // Tree-shaking	不支持，所有功能打包进应用	    支持按需引入，体积更小
        // 渲染函数	性能一般	                       优化的渲染函数，执行效率更高
        // 内存占用	较高，每个实例维护多个 watcher	    降低约 40% 内存占用

    </script>
</body>
</html>